<template>
  <div class="box">
    <!-- 检索 -->
    <div class="s-box">
      <div class="search-box">
        <div class="btn-box" @click="showPanel">高级搜索</div>
        <el-input
          placeholder="请输入企业名称"
          v-model="searchTxt"
          @keydown.enter.native="search()"
          class="elinp"
          @change="changeInput"
        >
          <div slot="prefix">
            <el-dropdown
              trigger="click"
              placement="bottom"
              @command="handleCommand"
            >
              <span class="el-dropdown-link">
                {{ searchTypeName
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="beforeCommand('1', '企业名称')">企业名称</el-dropdown-item>
                <el-dropdown-item :command="beforeCommand('2', '法人')">法人</el-dropdown-item>
                <el-dropdown-item :command="beforeCommand('3', '经营范围')">经营范围</el-dropdown-item>
                <el-dropdown-item :command="beforeCommand('4', '注册地址')">注册地址</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-input>
        <el-button slot="append" @click="search()" class="search-button"
          >搜索</el-button
        >
      </div>
    </div>
    <AdvancedPanel
      v-show="showAdvancedPanel"
      ref="advancedPanel"
      @search="search"
    />
    <ResultList
      ref="resultList"
      :formValue="formValue"
      :searchTxt="searchTxt"
    />
  </div>
</template>

<script>
import ResultList from "./ResultList.vue";
import AdvancedPanel from "./AdvancedPanel.vue";
import advancedData from "./advancedData";
export default {
  components: {
    ResultList,
    AdvancedPanel
  },
  data() {
    return {
      searchTxt: "",
      showAdvancedPanel: false,
      formValue: {
        searchType: "1", //1、企业名称 2、法人 3、经营范围 4、注册地址
      },
      searchTypeName: "企业名称"
    };
  },
  beforeMount() {
    let params = this.$route.params;
    if (params.keyword) {
      this.searchTxt = params.keyword || "";
    }
    if (params.searchTypeName) {
      this.handleCommand({
        name: params.searchTypeName,
        command: params.searchType,
      });
    }
  },
  methods: {
    beforeCommand(command, name) {
      return {
        command: command,
        name: name,
      };
    },
    // 切换下拉菜单项
    handleCommand(command) {
      this.searchTypeName = command.name;
      this.formValue.searchType = command.command;
    },
    showPanel() {
      this.showAdvancedPanel = !this.showAdvancedPanel;
    },
    changeInput() {
      advancedData.map((item, index) => {
        this.$refs.advancedPanel.changeTag(index, "全部");
      });
      this.$refs.advancedPanel.advancedForm = {
        partyOrganId: null, // 产业领域
        area: null // 注册地区
      };
    },
    search(value) {
      this.showAdvancedPanel = false;
      if (value) {
        // 高级检索
        Object.assign(value, { searchType: this.formValue.searchType });
        this.$refs.resultList.search(value, 1);
      } else {
        // 普通检索
        this.formValue = {
          searchType: this.formValue.searchType,
        };
        this.$refs.resultList.search(this.formValue, 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  height: calc(100vh - 0.7rem);
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .s-box {
    flex: none;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0.18rem 0;
    background: #fff;
    .search-box {
      position: relative;
      width: 10.3rem;
      display: flex;
      margin: 0 auto;
      .btn-box {
        width: 1rem;
        flex: none;
        font-size: 0.18rem;
        font-weight: 700;
        color: $mainColor;
        line-height: 0.54rem;
        cursor: pointer;
      }
      .elinp {
        position: relative;
        ::v-deep {
          .el-input__inner {
            height: 0.54rem;
            line-height: 0.54rem;
            padding-left: 1.3rem;
            border-color: $mainColor;
            border-radius: 0.08rem;
            font-size: 0.18rem;
            color: #283146;
            &:focus {
              border-color: $mainColor;
            }
          }
          .el-input__prefix {
            width: 1.1rem;
            height: calc(0.54rem - 2px);
            line-height: calc(0.53rem - 2px);
            margin-top: 1px;
            border-right: 1px solid #dbdef2;
            .el-dropdown-link {
              font-size: 0.16rem;
            }
          }
        }
        .search-icon {
          position: absolute;
          top: 0;
        }
      }
      .search-button {
        width: 0.94rem;
        height: 0.54rem;
        border-radius: 0.08rem;
        font-size: 0.18rem;
        color: #fff;
        background-color: $mainColor;
        margin-left: 0.14rem;
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: transform 0.4s ease-in-out;
  }
  .fade-enter,
  .fade-leave-active {
    transform: translate3d(0, -100%, 0);
  }
}
.elcascader,
.elselect {
  width: 100%;
  ::v-deep {
    .el-input__inner {
      height: 0.4rem;
      line-height: 0.4rem;
    }
  }
}
</style>
